<template>
  <div class="_wz_leftPage">
    <div class="_wz_leftPage_header">
      <div class="top-wrap top-img01">
        <div class="_wz_leftPage_header_number">
          <CountUp :end="!!vehicleData.vehicleTotal ? vehicleData.vehicleTotal : 0" :duration="2" :start="!!vehicleData.vehicleTotal ? vehicleData.vehicleTotal - 100 : 0"  v-font="26" style="font-family:'Barlow-Medium1'" />
        </div>
        <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;">车辆总数</div>
      </div>
<!--      <div class="top-wrap top-img01">-->
<!--        <template v-if="movingOut">-->
<!--          <div class="_wz_leftPage_header_number">+-->
<!--            <CountUp :end="!!vehicleData.moveIn ? vehicleData.moveIn : 0" :duration="2"  :start="!!vehicleData.moveIn ? vehicleData.moveIn - 20 : 0" v-font="26" style="font-family:'Barlow-Medium1'"/>-->
<!--          </div>-->
<!--          <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;color: #6de7aa;">当日迁入</div>-->
<!--        </template>-->
<!--        <template v-else>-->
<!--          <div class="top-wrap top-img01">-->
<!--            <div class="_wz_leftPage_header_number">- -->
<!--              <CountUp :end="!!vehicleData.moveOut ? vehicleData.moveOut : 0" :duration="2" :start="!!vehicleData.moveOut ? vehicleData.moveOut - 3 : 0"  v-font="26" style="font-family:'Barlow-Medium1'"/>-->
<!--            </div>-->
<!--            <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;color: #fbc677;">当日迁出</div>-->
<!--          </div>-->
<!--        </template>-->
<!--      </div>-->
      <div class="top-wrap top-img01">
        <template v-if="networkAccessSwitch == 1">
          <div class="_wz_leftPage_header_number">
            <CountUp :end="!!networkAccess.connectedVehicles ? networkAccess.connectedVehicles : 0" :duration="2"  v-font="26" style="font-family:'Barlow-Medium1'"/>
          </div>
          <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;color: #6de7aa;">入网车辆</div>
        </template>
        <template v-else-if="networkAccessSwitch == 2">
          <div class="_wz_leftPage_header_number">
            <CountUp :end="!!networkAccess.notNetwork ? networkAccess.notNetwork : 0" :duration="2"  v-font="26" style="font-family:'Barlow-Medium1'"/>
          </div>
          <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;color: #f57a5b;">未入网</div>
        </template>
        <template v-else>
          <div class="_wz_leftPage_header_number">
            <CountUp :end="!!networkAccess.timedOutNetworkAccess ? networkAccess.timedOutNetworkAccess : 0" :duration="2"  v-font="26" style="font-family:'Barlow-Medium1'"/>
          </div>
          <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;color: #fbc677;">超时入网</div>
        </template>
      </div>
      <div class="top-wrap top-img01">
        <div class="_wz_leftPage_header_number">
          <CountUp :end="!!networkAccess.networkAccessRate ? networkAccess.networkAccessRate : 0" :duration="2" :decimals="2"  v-font="26" style="font-family:'Barlow-Medium1'"/>%
        </div>
        <div style=" white-space: nowrap;font-size: 16px;letter-spacing: 2px;">接入率</div>
      </div>
    </div>

    <div style="height: 110px;margin: 10px 0 0 0;">
      <div style="height:100%;display: flex;">
        <template v-for="item in emissionType">
          <div style="width: calc((100% - 10px) / 3);height: 100%;"> <semicircleCharts  :charData="item"/></div>
        </template>
      </div>
    </div>
    <div style="height: calc(100% - 150px - 110px - 10px);margin-top: 10px;">
      <div class="_wz_dy_title _wz_title_select" style="padding: 0 0 0 40px;">车辆类型占比统计</div>

      <div class="_wz_leftPage_header01" style="height:calc((100% - 20px - 35px) / 3);">
        <div class="fuelOil" style="position: relative">
          <div style="width: 100%;height: 100%;position: absolute;z-index: 9999" :id="fluorescentCakeData.id"> </div>
          <img class="echartsImg" src="@/assets/visual/echartsbg1.png" alt="" width="160">
        </div>
      </div>

      <div style="height: calc((100% - 20px - 35px) / 3);margin:0 0 10px 0;">
        <div style="height: 100%;width: 100%;" :id="columnarData.id"></div>
      </div>

      <div style="height: calc((100% - 10px - 35px) / 3);">
        <pieChart :dataConfiguration="pieChartData" v-if="!!pieChartData.dataList && pieChartData.dataList.length > 0"/>
      </div>


    </div>
  </div>

  <modulePage ref="moduleRef" :fluorescentCakeData="fluorescentCakeData" :columnarData="columnarData"></modulePage>

</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch
} from 'vue'
import {useRouter, useRoute} from "vue-router";


import {useMainStore} from '../../../store'  //pinia 使用 类似 vuex
import {storeToRefs} from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import * as echartsGL from 'echarts-gl' // 引入echarts

import pieChart from '@/components/charts/baiDu/pieChart/charts.vue'  //饼图
import semicircleCharts from '../dynamicVehicle/semicircleCharts.vue'  //半圆图
import modulePage from '../../operational/modulePage.vue'  //全部图Charts

//reactive
export default defineComponent({
  name: 'leftPage',//组件名称
  components: {
    pieChart,//饼图
    semicircleCharts,//半圆图
    modulePage,//全部图Charts
  },//组件引用
  setup(props, context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $echarts = inject('$echarts');//引用echarts
    const $common = inject('$common');//自己封装的方法

    const state = reactive({
      vehicleData:{//车辆数据
        vehicleTotal:5365,//车辆总数
        moveIn:200,//迁入
        moveOut:10,//迁出
      },
      networkAccess:{//入网车辆数据
        networkAccessRate:89.61,//接入率
        connectedVehicles:0,//入网车辆
        timedOutNetworkAccess:0,//超时入网
        notNetwork:0,//未入网
      },
      //各种率
      emissionType:[
        {id:'emissionType4','name':'轨迹完整率',value:73,fontColor:'#28BCFE',lineColor:['#25BFFF','#5284DE','#2A95F9','#fff']},
        {id:'emissionType5','name':'数据合格率',value:98,fontColor:'#19be6b',lineColor:['#129b57','#09753f','#045e31','#fff']},
        {id:'emissionType6','name':'定位漂移率',value:2.3,fontColor:'#ff9900',lineColor:['#bd7203','#805801','#643d03','#fff']},
      ],
      movingOut:true,//迁入迁出 数据切换   嵌入 true    迁出 false
      networkAccessSwitch:1,// 入网车辆 切换
      fluorescentCakeData:{//车辆类型数据
        id:'bread',
        dataList:[
          {name:'普货运输',value:5266},
          {name:'危货运输',value:159},
          // {name:'旅客运输',value:0},
          // {name:'出租网约',value:0},
          // {name:'城市公交',value:0},
          // {name:'场站维修',value:0},
          // {name:'邮政转运',value:0},
          // {name:'汽车租赁',value:0},
        ],
      },

      columnarData:{ //车龄数据
        id:'columnar',
        dataList:[
          {name:'车龄1年',value:0},
          {name:'车龄2年',value:0},
          {name:'车龄3年',value:0},
          {name:'车龄4年',value:0},
          {name:'车龄5以上',value:0},
        ],
      },
      moduleRef:ref(),
      pieChartData:{//排放标准数据
        "id":"pieChart",
        "width":'100%',
        "height":'100%',
        roseChart:0,//玫瑰图
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[
          // {name:'国Ⅳ',value:20},
          // {name:'国Ⅴ',value:77},
          // {name:'国Ⅵ',value:70},
          {name:'柴油',value:3953},
          {name:'纯电动',value:210},
          {name:'天然气',value:1159},
        ],
        "legend":7,
        size:70,
        withinSize:0,
        semiCircle:100,
        "marginUnit":"%",
        "top":10,
        "right":4,
        "bottom":4,
        "left":40
      },

    });


    //页面初始化加载数据
    const loadData = () => {

      subjectVehicleVehicleInternet();//车辆入网统计



      setInterval(()=>{
        state.movingOut = !state.movingOut
        state.networkAccessSwitch = (state.networkAccessSwitch + 1 > 2) ? 1 : state.networkAccessSwitch + 1;
      },5000)

    }

    //车辆入网统计
    const subjectVehicleVehicleInternet = ()=>{
      state.networkAccess = {
        networkAccessRate:89.61,//接入率
        connectedVehicles:4808,//入网车辆
        timedOutNetworkAccess:0,//超时入网
        notNetwork:557,//未入网
      }

      return false;
      $axios.post(apiUrl.subjectVehicleVehicleInternet,{}).then((res) => {
        if(!!res){
          let data = res.data.data;
          state.networkAccess = {
            networkAccessRate:!!data[0].value ? ((data[1].value / data[0].value) * 100) : 0,//接入率
            connectedVehicles:data[1].value,//入网车辆
            timedOutNetworkAccess:data[2].value,//超时入网
            notNetwork:data[2].value,//未入网
          }

          // todo  开发的时候 暂时不去频繁请求
          return false;
          let mun = $common.randomNum(8,12);
          setTimeout(()=>{
            subjectVehicleVehicleInternet()
          }, mun  * 1000)
        }
      }).catch((err) => {
        console.log("失败", err)
      })
    }



    // 其他的生命周期
    onBeforeMount(() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted(() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData();//页面初始化加载数据
      state.moduleRef.columnar()
      state.moduleRef.fluorescentCake()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated(() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount(() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style scoped lang="less">
._wz_leftPage{
  width: 100%;
  height: 100%;
  ._wz_leftPage_header{
    display: flex;
    justify-content: space-around;
    .top-wrap{
      width: calc(100% / 3);
      height: 150px;
      display: flex;
      color: white;
      flex-direction: column;
      align-items: center;
      font-size: 13px;
    }
    .top-img01{
      background: url("@/assets/visual/icon_count_base10.png") no-repeat 50% 68%;
      background-size:160px ;
      ._wz_leftPage_header_number{
        font-size: 32px;
        white-space: nowrap;
      }
    }
    .top-img02{
      background: url("@/assets/visual/icon_left03.png") no-repeat 50% 100%;
      background-size:100px ;
    }
    .top-img03{
      background: url("@/assets/visual/icon_left01.png") no-repeat 50% 100%;
      background-size:100px ;
    }
  }
  ._wz_leftPage_header01{
    display: flex;
    height: 160px;
    .fuelOil{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .echartsImg {
        animation: spin 3s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    }

    //暂时不用了
    .header-img{
      color: white;
      text-align: center;
      font-size: 13px;
      width: 200px;
      height: 100%;
      background: url("@/assets/visual/icon_left04.png") no-repeat 50% 300%;
      background-size:150px;
    }
    .header-text{
      width: calc(100% - 200px);
      height: 100%;

      .text{
        color: white;
        text-align: center;
        font-size: 13px;
        margin-top: 5px;
      }
      .header-text-img{
        height: calc(100% / 2);
        background: url("@/assets/visual/icon_left05.png") no-repeat 50% 80%;
        background-size:100px;
      }
    }
  }
}
</style>
